<template>
<div class="note" :style ="note" >
  <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" style="margin: auto" label-position="left" label-width="0px" class="login-container">
        <h3 class="title">系统登录</h3>
        <el-form-item prop="username">
            <el-input type="text" v-model="ruleForm2.username" auto-complete="off" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item prop="checkPass">
            <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off" placeholder="密码"></el-input>
        </el-form-item>
      <el-form-item prop="code" style="height: 5px">
        <el-row :span="28" style="display: flex; flex-wrap: wrap ">
          <el-col :span="10">
            <el-input v-model="ruleForm2.code" auto-complete="off" placeholder="请输入验证码" size=""></el-input>
          </el-col>
          <el-col :span="12" offset="2">
            <div class="verify-box" @click="refreshCode">
              <!--验证码组件-->
              <SIdentify :identifyCode="identifyCode"></SIdentify>
            </div>
          </el-col>
        </el-row>
      </el-form-item>
      <br>
      <el-form-item style="width:100%;height: 20px">
        <el-button type="text"   @click="forgetPassword">忘记密码？</el-button>
      </el-form-item>

      <el-form-item style="width:100%;">
            <el-button type="primary" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
        </el-form-item>
    </el-form>
</div>
</template>

<script>
    import SIdentify from './global/identify'

    export default {
        components:{
            SIdentify
        },
        data() {
            return {
                //设置居中的时候父元素要设置display: "flex"，子元素设置style="margin: auto"
                note: {
                    backgroundImage: "url(" + require("../assets/login.png") + ")",
                    width: "100%",
                    height: "100%",
                    backgroundSize: "cover",
                    display: "flex"
                },
                logining: false,
                identifyCodes: '1234567890abcdefjhijklinopqrsduvwxyz',
                identifyCode: '',
                ruleForm2: {
                  username: '',
                  checkPass: '',
                  code:''
                },
                rules2: {
                    username: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        //{ validator: validaePass }
                    ],
                    checkPass: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        //{ validator: validaePass2 }
                    ]}
            };
        },
        created () {},
        mounted () {
            // 初始化验证码
            this.identifyCode = ''
            this.makeCode(this.identifyCodes, 4)
        },
        methods: {
            // 重置验证码
            refreshCode () {
                this.identifyCode = ''
                this.makeCode(this.identifyCodes, 4)
            },
            makeCode (o, l) {
                for (let i = 0; i < l; i++) {
                    this.identifyCode += this.identifyCodes[this.randomNum(0, this.identifyCodes.length)]
                }
            },
            randomNum (min, max) {
                return Math.floor(Math.random() * (max - min) + min)
            },
            handleSubmit2(ev) {
                if (this.ruleForm2.code.toLowerCase() !== this.identifyCode.toLowerCase()) {
                    this.$message.error('请填写正确验证码')
                    this.refreshCode()
                    return
                }
                this.$refs.ruleForm2.validate((valid) => {
                  if (valid){
                    this.$axios.post("managementSystem/user/loginByTel", {tel:this.ruleForm2.username,password: this.ruleForm2.checkPass})
                      .then(data => {
                        // 登录失败,先不讨论
                        if (data.status != 200) {
                          this.$message.error('服务出错'+data.status);
                          // this.$message(fgf{
                          //   message:'服务错误',
                          //   type:'warn'
                          // });
                        } else {
                          if (data.data.errorCode == '200'){
                              console.log("sessionId:"+data.data.sessionId)
                              console.log("userName:"+data.data.userName)
                              console.log("imageUrl:"+data.data.imageUrl)
                              console.log("userType:"+data.data.userType)
                              console.log("limit:"+ data.data.limit)
                              //保存用户信息
                              window.sessionStorage.setItem("sessionId", data.data.sessionId);
                              window.sessionStorage.setItem("userName", data.data.userName);
                              window.sessionStorage.setItem("imageUrl", data.data.imageUrl);
                              window.sessionStorage.setItem("userType", data.data.userType);
                              window.sessionStorage.setItem("visible", data.data.visible);
                              window.sessionStorage.setItem("limit", data.data.limit);//js的sessionStorage只能存储字符串数据
                              this.GLOBAL.sysUserName = window.sessionStorage.getItem("userName");
                              this.GLOBAL.sysUserAvatar = window.sessionStorage.getItem("imageUrl");
                              this.GLOBAL.sysUserType = window.sessionStorage.getItem("userType");
                              this.GLOBAL.sysUserVisible = window.sessionStorage.getItem("visible");
                              if(data.data.limit==null||data.data.limit===""){
                                  this.GLOBAL.global_limit=[];
                              }else{
                                  this.GLOBAL.global_limit=data.data.limit.split(",");

                              }


                            // 登录成功提示
                            this.$message.success('登录成功');
                            // 登录成功后跳转到指定页面
                            this.$router.push("/home");
                          } else {
                            this.$message.error('账号或密码错误');
                          }

                        }
                      });
                  }

                });
            },
            forgetPassword() {
                this.$alert('020-888888', '请联系管理员或致电客服', {
                    confirmButtonText: '确定',
                });
            }

        }
    }

</script>
<style >
    .login-container {
        -webkit-border-radius: 5px;
        border-radius: 5px;
        -moz-border-radius: 5px;
        background-clip: padding-box;
        margin: 0px auto;
        width: 350px;
        padding: 35px 35px 15px 35px;
        background: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
    }
    .title {
        margin: 0px auto 40px auto;
        text-align: center;
        color: #505458;
    }
    .remember {
        margin: 0px 0px 35px 0px;
    }
</style>

